<template>
    <div>
        <h2>房型修改</h2>
    <table class="table">
<tbody>

<tr>
    <td>房型名称</td>
    <td>
        <input type="text" v-model="model.TypeName">
    </td>
</tr>


<tr>
    <td>房型价格</td>
    <td>
        <input type="text"  v-model="model.TypePrice">
    </td>
</tr>


<tr>
    <td>房型图片</td>
    <td>
        <input type="file" @change="changeImg" />
        <img :src="model.Photo" width="100" height="100" >
    </td>
</tr>


<tr>
    <td>房型面积</td>
    <td>
        <input type="text"  v-model="model.TypeArea">
    </td>
</tr>




<tr>
    <td>入住人数</td>
    <td>
        <input type="text"  v-model="model.Pepole">
    </td>
</tr>



<tr>
    <td>是否有窗</td>
    <td>
        <input type="radio" name="win"  value="1" v-model="model.IsWindow">是
        <input type="radio" name="win" value="0" v-model="model.IsWindow">否
    </td>
</tr>


<tr>
    <td>房态</td>
    <td>
       <select  v-model="model.TypeState">
        <option value="">请选择</option>
        <option :value="1">空闲</option>
        <option :value="2">已预约</option>
        <option :value="3">已入住</option>
       </select>
    </td>
</tr>



<tr>
    <td></td>
    <td>
        <td><input type="button" value="修改" @click="ok" class="btn btn-success" /></td>
    </td>
</tr>

</tbody>
</table>


    </div>
</template>

<script setup lang="ts">

import { ref, reactive, onMounted } from 'vue';
 import axios from 'axios';
 import { useRouter ,useRoute} from 'vue-router';
 
 const router=useRouter();

 const route=useRoute();
 let model=reactive({
Id:route.query.Id,
  "TypeName": '',
  "TypePrice": '',
  "TypeArea": '',
  "IsWindow": 1,
  "Pepole":'',
  "Photo": '',
  "TypeState": '',
 })
//1.上传图片
const changeImg = (e: any) => {
    //将文件转成FormData格式
    var obj = e.target.files[0];
    var f = new FormData();
    f.append('file', obj);
    //发送网络请求完成上传
    axios({
      url: '/api/Commons/UpoadImgs',
      method: 'post',
      data: f,
    })
      .then((res) => {
        console.log(res);
        if (res.data.code == -1) {
          alert(res.data.msg);
          return;
        }
        if (res.data.code == -2) {
          alert(res.data.msg);
          return;
        }
        //上传成功   1.成功的图片地址存储  2.预览图片
        model.Photo = 'https://localhost:7291' + res.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
  };


onMounted(()=>{
GteDate();

 })

//反填
const GteDate=()=>{
axios({
url:'/api/HouseType/HouseTypeAll',
method:'get',
params:{
Id:route.query.Id,

}

})
.then((res)=>{
    console.log(res);
  model.TypeName=res.data.TypeName;
  model.TypePrice=res.data.TypePrice;
  model.TypeArea=res.data.TypeArea;
  model.IsWindow=res.data.IsWindow;
  model.Pepole=res.data.Pepole;
  model.TypeName=res.data.TypeName;
  model.Photo=res.data.Photo;
  model.TypeState=res.data.TypeState;
})

.catch((ree)=>{
    console.log(ree);
})

 }
 //修改
const ok=()=>{

    axios({
      url: '/api/HouseType/HouseTypeUpd',
      method: 'put',
      data: model,
    })
      .then((res) => {
        console.log(res);
        if (res.data == 1) {
          alert('修改成功');
          router.push('/houseTypeList');
        } else if (res.data == -1) {
          alert('房型名称重复');
          return;
        } else {
          alert('修改失败');
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });


}





</script>

<style scoped>

</style>